<template>
  <page-meta :root-font-size="fontsize" class="manage-store">
    <canvas
      id="my-canvas"
      width="500"
      height="400"
      canvas-id="my-canvas"
    ></canvas>

    <xlNavBar title="管理转店" bgc="ff9d49" :showLeft="true"></xlNavBar>

    <view class="ms-header" v-if="!(storeDetail && storeDetail.is_top && storeDetail.status === 1)">
      <view class="h-left">
        <view class="main">
          <view class="title">
            当前积分<text>{{ getUserInfo.integral || 0 }}</text>
          </view>
          <view class="text">
            可被联系{{ Math.floor(getUserInfo.integral / 2) || 0 }}次
          </view>
        </view>
        <view class="info">每个用户联系您需要消耗您<text>2</text>积分</view>
      </view>
      <view
        class="h-right"
        v-if="$isIos() != 'IOS'"
        @click="$togo('/pages3/integralRechargePage')"
      >
        去增加数量
      </view>
    </view>

    <view class="ms-wrapper" v-for="item in manageStoreList" :key="item.id">
      <view class="w-header">
        <img class="image" :src="imageStatus[item.status]" mode="widthFix" />
        <view
          class="info"
          v-if="item.is_buy_top && (item.status === 4 || item.status === 5)"
        >
          已购买置顶，审核通过后将直接加急展示该信息
        </view>
        <img
          class="icon"
          v-if="item.is_top && item.status === 1"
          src="./image/top-icon.png"
          mode="widthFix"
        />
      </view>

      <view class="w-content">
        <view class="c-title" @click="goStoreDetail">
          {{ item.store_highlight }}
        </view>
        <view class="c-info" @click="goStoreDetail">
          <view class="i-card">
            <view class="name">
              {{ item.monthly_rent }} <span class="unit">元/月</span>
            </view>
            <view class="text">
              {{
                (item.monthly_rent / item.store_area / 30).toFixed(1)
              }}元/m²/天
            </view>
          </view>
          <view class="i-card">
            <view class="name">
              {{ item.store_area }} <span class="unit">m²</span>
            </view>
            <view class="text">面积</view>
          </view>
          <view class="i-card">
            <view class="name">
              {{
                item.is_transfer_fee !== 1
                  ? "无转让费"
                  : item.is_show_transfer_fee === 1
                  ? (item.transfer_fee/10000).toFixed(2) + "万元"
                  : "面议"
              }}
            </view>
            <view class="text">转让费</view>
          </view>
        </view>
        <view class="c-image" v-if="item.store_image.length > 0">
          <image
            class="image"
            v-for="(img, idx) in getImages(item.store_image)"
            @click="previewImage(getImages(item.store_image), idx)"
            :key="img"
            :src="img"
            mode="aspectFill"
          />
        </view>
        <view class="c-address">
          <view class="a-info">
            <i class="iconfont cyweizhi"></i>
            <text class="address">{{ item.store_address || "暂无地址" }}</text>
          </view>
          <view class="a-time">{{ item.show_time }}</view>
        </view>
      </view>

      <view
        class="w-operate"
        v-if="item.status === 1 || item.status === 3 || item.status === 5"
      >
        <view class="operate" v-if="item.status === 1 || item.status === 3">
          <view class="o-left">
            <view
              class="option"
              :class="[item.status === 1 && 'active']"
              @click="handleActive(item.status, 1)"
            >
              开启转店
            </view>
            <view
              class="option"
              :class="[item.status === 3 && 'active']"
              @click="handleActive(item.status, 3)"
            >
              关闭转店
            </view>
          </view>
          <view class="o-right">
            <view class="main" @click="editStore">
              <img class="icon" src="./image/edit-icon.png" mode="widthFix" />
              修改
            </view>
            <view class="main" @click="deleteStore">
              <img class="icon" src="./image/delete-icon.png" mode="widthFix" />
              删除
            </view>
          </view>
        </view>
        <template v-else>
          <view class="o-main" @click="editStore">
            <view class="name">立即修改</view>
          </view>
          <view class="o-reason"> 不通过原因：{{ item.fail_reason }} </view>
        </template>
      </view>
    </view>

    <view class="ms-tip" @click="goContactStore">
      <view class="t-header">
        <view class="title">联系记录</view>
        <view class="text">
          查看详情
          <img class="icon" src="./image/left-icon.png" mode="widthFix" />
        </view>
      </view>
      <view class="t-content">
        共<text>{{ contactTotal }}人</text>已拨打电话联系您；
        <text>{{ intentionTotal }}人</text>
        对您的店铺提交了意向，点击详情与对方取得联系。
      </view>
    </view>

    <button
      class="ms-share"
      type="default"
			v-if="storeDetail && storeDetail.status === 1"
      data-name="shareBtn"
      open-type="share"
    >
      去分享店铺
      <img class="icon" src="./image/share-icon.png" mode="widthFix" />
    </button>

    <view class="ms-operate">
      <view class="o-info" @click="handleRefresh">
        <view class="title">
          <img class="icon" src="./image/refresh-icon.png" mode="widthFix" />
          立即刷新
        </view>
        <view class="text"> 2积分刷新发布时间提升排名 </view>
      </view>
      <view class="o-info o-right" @click="handleCrown">
        <view class="title">
          <img class="icon" src="./image/crown-icon.png" mode="widthFix" />
          置顶店铺
        </view>
        <view class="text"> 提升曝光量，用户免费联系您 </view>
      </view>
    </view>

    <TipPopup
      :title="tipOption.title"
      :content="tipOption.content"
      :submitText="tipOption.submitText"
      @submitTip="tipOption.submit()"
      @closeTip="closeTip"
      v-if="tipPopup"
    ></TipPopup>
  </page-meta>
</template>

<script>
import TipPopup from "./components/tipPopup.vue";
import yesImage from "./image/status/pass-yes.png";
import examiningImage from "./image/status/examining.png";
import closedImage from "./image/status/closed.png";
import noImage from "./image/status/pass-no.png";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "ManageStore",
  data() {
    return {
      fontsize: "",
      imageStatus: {
        1: yesImage,
        2: examiningImage,
        3: closedImage,
        4: examiningImage,
        5: noImage
      },
      manageStoreList: [],
      contactTotal: 0,
      intentionTotal: 0,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      },
      tipPopup: false,
      storeId: null,
      storeDetail: null
    };
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"])
  },
  components: { TipPopup },
  onLoad() {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });
  },
  onShow() {
    this.getList();
  },
  onShareAppMessage() {
    let that = this;
    let transferFee =
      that.storeDetail.is_transfer_fee !== 1
        ? "无转让费"
        : this.storeDetail.is_show_transfer_fee === 1
        ? (this.storeDetail.transfer_fee/10000).toFixed(2) + "万元转让费"
        : "转让费面议";
		let city = that.getCityInfo();
    return {
      title: `${city}店铺转租，${that.storeDetail.store_area}平米，租金${that.storeDetail.monthly_rent}元/月，${transferFee}`,
      path: `/shopPackage/storeDetail?id=${that.storeDetail.id}&share=1&shareUserId=${that.$getStoraged(
        "user_id"
      )}`,
      imageUrl:
        "https://chenxiao.obs.cn-north-1.myhuaweicloud.com/img/13_1680789438427854430.eterYuCrlWYubbb1b3348e59dda8aa3997977bb17a78.jpg",
      desc: "",
      content: "",
      success() {
        uni.showToast({
          title: "分享成功"
        });
      },
      fail() {
        uni.showToast({
          title: "分享失败",
          icon: "none"
        });
      }
    };
  },
  methods: {
    ...mapActions("user", ["setUserInfo", "setStatus"]),
    async getContactList() {
      let params = {
        purpose_id: this.storeId
      };
      let contactRes = await this.$http.requestSync(
        "/storefronts/contact_history",
        params,
        "POST"
      );
      let intentionRes = await this.$http.requestSync(
        "/storefronts/intention_history",
        params,
        "POST"
      );
      this.contactTotal = contactRes.total;
      this.intentionTotal = intentionRes.total;
    },
    async getList() {
      let res = await this.$http.requestSync("/storefronts/my", {}, "GET");
      if (res.code === 200 && res.storefronts && res.storefronts.length > 0) {
        this.manageStoreList = res.storefronts;
        this.storeId = res.storefronts[0].id;
        this.storeDetail = res.storefronts[0];
        this.getContactList();
      } else {
        this.manageStoreList = [];
      }
    },
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images
      });
    },
    getImages(str) {
      return str.split(",");
    },
    async handleActive(curStatus, status) {
      if (curStatus === status) {
        return;
      }
      let params = {
        id: this.storeId,
        status: status
      };
      // 1、生效， 2、删除，3、暂停，4、待审核，5、审核拒绝
      let res = await this.$http.requestSync(
        "/storefronts/update_status",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.getList();
      }
    },
    async handleRefresh() {
      if (this.storeDetail.status !== 1) {
        return this.$layer.message("店铺审核未通过");
      }
      let params = {
        id: this.storeId,
        integral: 2
      };
      let res = await this.$http.requestSync(
        "/storefronts/refresh",
        params,
        "POST"
      );

      if (res.code === 200) {
        this.getList();
        this.setUserInfo();
        this.$layer.message("更新成功");
      } else if (res.code === 10005) {
        this.tipPopup = true;
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        };
      } else {
        this.$layer.message(res.message);
      }
    },
    handleCrown() {
			let city = this.getCityInfo();
      this.$redirectTo(
        `/shopPackage/topStore?id=${this.storeId}&city=${city}`
      );
    },
		getCityInfo(){
			let province = this.storeDetail.first_area_des;
			let cityList = ['北京市','天津市','上海市','重庆市']
			if(cityList.includes(province)){
				return province
			}
			return this.storeDetail.second_area_des
		},
    editStore() {
      this.$togo("/shopPackage/publishStore?id=" + this.storeId);
    },
    deleteStore() {
      this.tipPopup = true;
      this.tipOption = {
        title: "",
        submitText: "确定",
        content: "当前店铺转让中，是否确认删除该店铺信息？（删除后将不再展示）",
        submit: () => {
          this.submitDeleteStore();
        }
      };
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitDeleteStore() {
      let params = {
        id: this.storeId,
        status: 2
      };
      //1、生效， 2、删除，3、暂停，4、待审核，5、审核拒绝
      let res = await this.$http.requestSync(
        "/storefronts/update_status",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.setStatus();
        this.$back();
      }
      this.tipPopup = false;
    },
    goStoreDetail() {
      if(this.storeDetail.status === 4){
        return
      }
      this.$togo("/shopPackage/storeDetail?id=" + this.storeId);
    },
    goContactStore() {
      this.$togo("/shopPackage/contactStore?id=" + this.storeId);
    }
  }
};
</script>

<style scoped lang="scss">
.manage-store {
  height: 100vh;
  background: #f7f7f7;
  display: block;
  .ms-header {
    display: flex;
    align-items: center;
    margin: 15px 10px;
    margin-bottom: 0;
    padding: 15px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    background: #fafafa;
    border-radius: 6px;
    .h-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      .main {
        display: flex;
        .title {
          color: #333333;
          font-weight: 600;
          font-size: 18px;
          text {
            color: #ff8822;
          }
        }
        .text {
          margin-left: 6px;
          padding: 0 10px;
          height: 24px;
          line-height: 24px;
          border-radius: 14px;
          background: rgba(255, 136, 34, 0.15);
          font-size: 12px;
          color: #ff8822;
          font-weight: 600;
        }
      }
      .info {
        margin-top: 8px;
        font-size: 14px;
        color: #999999;
        text {
          color: #ff8822;
        }
      }
    }
    .h-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 108px;
      background: linear-gradient(122deg, #ffa222 0%, #ff8822 100%);
      height: 36px;
      border-radius: 21px;
      color: #ffffff;
      font-weight: 600;
    }
  }

  .ms-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 0 10px;
    margin-top: 15px;
    background: #f9fcff;
    border-radius: 10px;
    border: 1px solid #dff0ff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
    .w-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      line-height: 30px;
      position: relative;
      .image {
        width: 65px;
        height: 28px;
        margin-left: -4px;
      }
      .info {
        font-size: 11px;
        color: #ff8822;
        margin-right: 6px;
      }
      .icon {
        position: absolute;
        z-index: 1;
        top: -2px;
        right: -2px;
        width: 36px;
        height: 36px;
      }
    }
    .w-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .c-title {
        font-size: 13px;
        color: #555555;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        .t-badge {
          padding: 4px 5px;
          margin-right: 4px;
          font-size: 10px;
          color: #2c9cfd;
          border-radius: 3px 3px 3px 3px;
          background: rgba(62, 166, 255, 0);
          border: 1px solid #2c9cfd;
        }
      }
      .c-info {
        display: flex;
        justify-content: space-around;
        margin: 15px 0;
        .i-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          .name {
            font-weight: 600;
            color: #2c9cfd;
            font-size: 18px;
            .unit {
              font-size: 12px;
            }
          }
          .text {
            margin-top: 5px;
            font-size: 10px;
            color: #999999;
          }
        }
      }
      .c-image {
        display: flex;
        margin-bottom: 10px;
        .image {
          margin-right: 10px;
          width: 76px;
          height: 76px;
          border-radius: 6px;
        }
      }
      .c-address {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #e4e4e4;
        .a-info {
          display: flex;
          font-size: 11px;
          .iconfont {
            color: #2c9cfd;
          }
          .address {
            color: #333333;
            margin-right: 5px;
          }
          .distance {
            padding: 0 5px;
            border-left: 1px solid #e4e4e4;
            color: #666666;
          }
        }
        .a-time {
          font-size: 11px;
          color: #999999;
        }
      }
    }
    .w-operate {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .operate {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        .o-left {
          display: flex;
          height: 27px;
          width: 132px;
          border-radius: 14px;
          background: #efefef;
          .option {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999999;
            &.active {
              font-weight: 600;
              color: #ffffff;
              background: #ff8822;
              border-radius: 14px;
            }
          }
        }
        .o-right {
          display: flex;
          align-items: center;
          .main {
            display: flex;
            align-items: center;
            margin-left: 10px;
            font-size: 12px;
            color: #ff8822;
            .icon {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
      .o-main {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .name {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 76px;
          height: 28px;
          font-size: 12px;
          font-weight: 600;
          color: #ffffff;
          background: #ff8822;
          border-radius: 14px;
        }
      }
      .o-reason {
        width: 100%;
        line-height: 36px;
        font-size: 13px;
        color: #f54a4a;
      }
    }
  }

  .ms-tip {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    padding: 15px;
    box-sizing: border-box;
    margin: 15px 10px;
    border-radius: 6px;
    background: #fff;
    .t-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;
      }
      .text {
        display: flex;
        align-items: center;
        color: #ff8822;
        font-size: 12px;
        .icon {
          width: 14px;
          height: 14px;
        }
      }
    }
    .t-content {
      margin-top: 10px;
      line-height: 18px;
      font-size: 14px;
      color: #333333;
      text:first-child {
        color: #ff8822;
      }
      text:last-child {
        color: #f76a6a;
      }
    }
  }

  .ms-share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 27px;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 14px;
    background: #ededed;
    border: 1px solid #e4e4e4;
    color: #999999;
    font-size: 12px;
    .icon {
      margin-left: 4px;
      width: 10px;
      height: 10px;
    }
  }

  .ms-operate {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px;
    .o-info {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 48%;
      height: 70px;
      border-radius: 10px;
      color: #ff8822;
      background: rgba(255, 136, 34, 0.2);
      .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        .icon {
          margin-right: 6px;
          width: 16px;
          height: 16px;
        }
      }
      .text {
        margin-top: 4px;
        font-size: 12px;
      }
    }

    .o-right {
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      color: #ffffff;
    }
  }
}
</style>
